<div class="root-content">
  <img class="background-image" src="/assets/images/h.png"/>
  <div class="center-content">
    <img class="logo" src="/assets/images/logo.png" />
    <p class="body-content">
      Please login to begin managing your Smart Hotels.
    </p>
    <form class="basic-auth-form" *ngIf="useBasicAuth" [formGroup]="loginForm" (ngSubmit)="login()">
      <div class="form-group">
        <label class="form-label" for="username">Username</label>
        <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
        <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
          <div *ngIf="f.username.errors.required">Username is required</div>
        </div>
        <label class="form-label" for="password">Password</label>
        <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
        <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
          <div *ngIf="f.password.errors.required">Password is required</div>
        </div>
      </div>
      <div class="form-group">
        <div class="failed-auth" *ngIf="invalidAuth">
          Authentication failed, please ensure your username and password are correct and try again.
        </div>
        <button [disabled]="authenticating" class="login-button">Login</button>
      </div>
    </form>
    <div *ngIf="!useBasicAuth" class="login-button" (click)="login()">
      Login
    </div>
  </div>
</div>